<template>
	<view class="myOrder">
		<view class="topBack">
			<view class="navListDiv">
				<view class="navItemDiv" v-for="(item,index) in navList" :key="index" @tap="activeFun(item,index)"
					:class="{activeNavItem:activeIndex==index,minWidth84:activeIndex!=0}">
					<view class="navItemText" :class="{activeText:activeIndex==index,minWidth112:index==0}">
						{{item.text}}</view>
					<view class="navItemBottom" v-if="activeIndex==index"
						:class="{minWidth126:index==0,minWidth84:activeIndex!=0}"></view>
				</view>
			</view>
			<view class="orderListDiv">
				<view class="orderItemDiv" v-for="(item,index) in orderList" :key="index" @tap="goOrderDetails(item)">
					<view class="orderItemTitleDiv">
						<text class="orderItemTitleLeft">订单号:{{item.order_sn}}</text>
						<text class="orderItemTitleRight" v-if="item.status==0">待支付</text>
						<text class="orderItemTitleRight" v-if="item.status==1">待发货</text>
						<text class="orderItemTitleRight" v-if="item.status==2">待收货</text>
						<text class="orderItemTitleRight" v-if="item.status==3">已完成</text>
						<text class="orderItemTitleRight" v-if="item.status==4">售后中</text>

					</view>
					<view class="gang"></view>
					<view class="orderItemBottom" v-for="(itom,indox) in item.goods_info" :key="indox">
						<view class="orderItemBottomLeft">
							<image class="orderItemBottomLeftImg" :src="itom.image"></image>
							<view class="orderItemBottomLeftRight">
								<text class="orderItemBottomLeftRightText">{{itom.title}}</text>
								<text class="orderItemBottomLeftRightBottom"><text
										class="orderItemfh">￥</text>{{itom.sum_price}}</text>
							</view>
						</view>
						<text class="gNum">共{{itom.goods_num}}件</text>
					</view>
				</view>
			</view>
		</view>

	</view>
	</view>
</template>

<script>
	// getOrderList
	import {
		getOrderList
	} from '@/api/my.js'
	export default {
		data() {
			return {
				navList: [{
					text: '全部订单'
				}, {
					text: '待支付'
				}, {
					text: '待收货'
				}, {
					text: '已完成'
				}],
				activeIndex: 0,
				pages: {
					type: null,
					page: 1,
					limit: 10,
				},
				status: 'loadmore',
				iconType: 'circle',
				loadText: {
					loadmore: '上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				orderList: [],
			}

		},
		/**
		 * 跳转到个人中心
		 */
		onBackPress(e) {

		},
		onPullDownRefresh() {

		},
		onShow() {
			// 商品列表
			this.pages.page = 1;
			this.getOrderList();

		},
		onReachBottom() {


			this.pages.page++;
			this.getOrderList();
		},

		onLoad(options) {

		},

		watch: {

		},
		methods: {
			activeFun(item, index) {
				this.activeIndex = index;
				this.getOrderList();
			},
			getOrderList() {
				let data = this.pages;
				if (this.activeIndex == 0) {
					data.type = null
				} else {
					data.type = this.activeIndex
				}
				getOrderList(data).then((res) => {
					console.log(res, '我的订单列表')
					if (res.code == 200) {
						// this.goodsList = res.data.list;
						if (this.pages.page == 1) {
							if (res.data.list.length == 0) {

								this.status = this.loadText.nomore;
							}

							this.orderList = res.data.list;


						} else if (this.pages.page > 1) {
							if (res.data.list.length == 0) {

								this.status = this.loadText.nomore;
							} else {

								this.orderList = [...this.orderList, ...res.data.list]

							}


						}
					}
				}).catch((res) => {})
			},
			goOrderDetails(item) {
				// orderDetails
				uni.navigateTo({
					url: "/pages/orderDetails/orderDetails?id=" + item.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.myOrder {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.topBack {
		width: 750rpx;
		height: 216rpx;
		background: linear-gradient(180deg, #FAE24E 0%, rgba(250, 226, 78, 0) 100%);
		border-radius: 0rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx 0 0 0;
		box-sizing: border-box;


	}

	.navListDiv {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 82rpx 0rpx 49rpx;
		box-sizing: border-box;
	}

	.navItemDiv {
		min-width: 84rpx;


		height: 45rpx;
		position: relative;
		// font-size: 32rpx;
		// font-family: PingFang SC-Heavy, PingFang SC;
		// font-weight: 800;
		// color: #030303;
	}

	.activeNavItem {
		min-width: 128rpx;
	}

	.navItemText {
		min-width: 84rpx;


		position: absolute;
		left: 0;
		top: 0;
		z-index: 3;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
	}

	.activeText {
		min-width: 128rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #030303;
	}

	.minWidth84 {
		min-width: 84rpx;
	}

	.minWidth112 {
		min-width: 112rpx;
	}

	.navItemBottom {
		// width: 126rpx;
		height: 9rpx;
		background: linear-gradient(270deg, #EEA92D 0%, #FFE7AD 100%);
		border-radius: 5rpx;
		position: absolute;
		bottom: 2rpx;
		right: 0;
		z-index: 2;

	}

	.minWidth126 {
		min-width: 126rpx;
	}

	.orderListDiv {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 32rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
	}

	.orderItemDiv {
		width: 690rpx;
		// height: 262rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		padding: 32rpx 29rpx 24rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.orderItemTitleDiv {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.orderItemTitleLeft {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
	}

	.orderItemTitleRight {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FF3131;
	}

	.gang {
		width: 100%;
		height: 1rpx;
		background: #D6D6D6;
		margin-top: 19rpx;
	}

	.orderItemBottom {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.orderItemBottomLeft {
		display: flex;
		align-items: center;
	}

	.orderItemBottomLeftImg {
		width: 120rpx;
		height: 120rpx;
	}

	.orderItemBottomLeftRight {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.orderItemBottomLeftRightText {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
	}

	.orderItemBottomLeftRightBottom {
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #EB1515;

	}

	.orderItemfh {
		font-size: 24rpx;
	}

	.gNum {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
	}
</style>